<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box {
            width: 500px;
            height: 500px;
            background-color: aqua;
        }
        
        .son {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
        } */
    </style>
</head>

<body>
    <!-- <div class="box">
        <div class="son"></div>
    </div> -->
    <!-- hehe
    <input type='checkbox'> -->
    <!-- <button>11111111111</button> -->
    <div>全选<input type="checkbox" class="checkAll"></div>
    <div>1杀杀杀<input type="checkbox" class="checkOne"></div>
    <div>2杀杀杀<input type="checkbox" class="checkOne"></div>
    <div>3杀杀杀<input type="checkbox" class="checkOne"></div>
    <script>
        // var box = document.querySelector('.box');
        // box.addEventListener('mouseover', function() {
        //     console.log(11111111111111);
        // })

        // var son = document.querySelector('.son');
        // box.addEventListener('mouseenter', function() {
        //     console.log(2222222222222222);
        // })

        // var ipt = document.querySelector('input');
        // var bt = document.querySelector('button');

        // bt.addEventListener('click', function() {
        //     console.log(this);
        //     console.log(ipt.value);
        //     this.disabled = true;
        //     // 谁调用这个函数，this就指向谁
        // })

        // ipt.addEventListener('click', function() {
        //     // console.log(this);
        //     console.log(ipt.checked, this.checked); // 选中true，未中flase。
        // })

        var iptAll = document.querySelector('.checkAll');
        var ipt = document.querySelectorAll('.checkOne');


        iptAll.addEventListener('click', function() {
            for (let i = 0; i < ipt.length; i++) {
                ipt[i].checked = iptAll.checked;
            }
        })

        for (let i = 0; i < ipt.length; i++) {
            ipt[i].addEventListener('click', function() {
                var flag = true;
                for (let i = 0; i < ipt.length; i++) {
                    if (!ipt[i].checked) {
                        flag = false;
                    }
                }
                iptAll.checked = flag;
            });
        };


        // var check_all = document.querySelector('.checkAll');
        // var check_ones = document.querySelectorAll('.checkOne');
        // check_all.addEventListener('click', function() {
        //     check_ones.forEach(function(ele) {
        //         ele.checked = check_all.checked
        //     })
        // })
        // check_ones.forEach(function(ele) {
        //     ele.addEventListener('click', function() {
        //         var flag = true; // 来判断下面三个多选是否选中
        //         check_ones.forEach(function(ele) {
        //             if (!ele.checked) { // 说明我有一个单选没选到
        //                 flag = false;
        //             }
        //         });
        //         check_all.checked = flag
        //     });

        // })
    </script>
</body>

</html>